統合テストの概要
単体テストとウィジェット テストは、個々のクラスをテストするのに便利です。 関数とかウィジェットとか。ただし、通常はその方法をテストしません 個々の作品が全体として連携したり、パフォーマンスを捉えたりする 実際のデバイス上で実行されているアプリケーションの。これらのタスクが実行されます と統合テスト。
統合テストは以下を使用して記述されます。統合テストパッケージ、提供 SDKによって。
このレシピでは、カウンター アプリをテストする方法を学びます。それは実証します 統合テストを設定する方法、特定のテキストが表示されることを確認する方法 アプリ別、特定のウィジェットをタップする方法、統合テストを実行する方法。
このレシピでは次の手順を使用します。
- テストするアプリを作成します。
- を追加します。
integration_test
依存。 - テストファイルを作成します。
- 結合テストを作成します。
- 統合テストを実行します。
1. テストするアプリを作成する
まず、テスト用のアプリを作成します。この例では、
によって作成されたカウンター アプリをテストするflutter create
指図。このアプリでは、ユーザーがボタンをタップすることができます
カウンターを増やすため。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Counter App',
home: MyHomePage(title: 'Counter App Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
// Provide a Key to this specific Text widget. This allows
// identifying the widget from inside the test suite,
// and reading the text.
key: const Key('counter'),
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
// Provide a Key to this button. This allows finding this
// specific button inside the test suite, and tapping it.
key: const Key('increment'),
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
integration_test
依存
2.次に、integration_test
とflutter_test
パッケージ
統合テストを作成します。これらの依存関係をdev_dependencies
アプリのセクションpubspec.yaml
ファイルに Flutter SDK を指定します。
パッケージの場所。
dev_dependencies:
integration_test:
sdk: flutter
flutter_test:
sdk: flutter
3. テストファイルを作成する
新しいディレクトリを作成し、integration_test
、空のapp_test.dart
ファイル:
counter_app/
lib/
main.dart
integration_test/
app_test.dart
4. 結合テストを作成する
これでテストを作成できるようになりました。これには次の 3 つのステップが含まれます。
- 初期化する
IntegrationTestWidgetsFlutterBinding
、シングルトンサービス 物理デバイス上でテストを実行します。 - を使用してウィジェットを操作およびテストします。
WidgetTester
クラス。 - 重要なシナリオをテストします。
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:counter_app/main.dart' as app;
void main() {
IntegrationTestWidgetsFlutterBinding.ensureInitialized();
group('end-to-end test', () {
testWidgets('tap on the floating action button, verify counter',
(tester) async {
app.main();
await tester.pumpAndSettle();
// Verify the counter starts at 0.
expect(find.text('0'), findsOneWidget);
// Finds the floating action button to tap on.
final Finder fab = find.byTooltip('Increment');
// Emulate a tap on the floating action button.
await tester.tap(fab);
// Trigger a frame.
await tester.pumpAndSettle();
// Verify the counter increments by 1.
expect(find.text('1'), findsOneWidget);
});
});
}
5. 統合テストを実行する
統合テストを実行するプロセスはプラットフォームによって異なります あなたはそれに対してテストを行っています。モバイル プラットフォームまたは Web に対してテストできます。
5a.モバイル
実際の iOS/Android デバイスでテストするには、まずデバイスを接続し、 プロジェクトのルートから次のコマンドを実行します。
flutter test integration_test/app_test.dart
または、すべての統合テストを実行するディレクトリを指定できます。
flutter test integration_test
このコマンドは、ターゲット デバイス上でアプリと統合テストを実行します。多くのための 情報については、を参照してください。結合テストページ。
TODO(ryjohn): 他の WebDriver バージョンがサポートされた後に追加し直します: https://github.com/flutter/flutter/issues/90158 Web をテストするには、 どのブラウザに対してテストするかを決定します 対応する Web ドライバーをダウンロードします。 * Chrome: [ChromeDriver をダウンロード][] * Firefox: [GeckoDriver をダウンロード][] * Safari: Safari は Mac でのみテストできます。 SafariDriver は Mac マシンにすでにインストールされています。 * Edge [EdgeDriver をダウンロード][] 5b.ウェブ
Web ブラウザでテストを開始するには、ChromeDriverをダウンロード。
次に、という名前の新しいディレクトリを作成します。test_driver
新しいファイルを含む
名前付きintegration_test.dart
:
import 'package:integration_test/integration_test_driver.dart';
Future<void> main() => integrationDriver();
発売chromedriver
次のように:
chromedriver --port=4444
プロジェクトのルートから次のコマンドを実行します。
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/app_test.dart \
-d chrome
ヘッドレス テスト エクスペリエンスのために、次のコマンドを実行することもできます。flutter drive
とweb-server
次のようにターゲットデバイス識別子として使用します。
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/app_test.dart \
-d web-server